<template>
  <div class="person-info-container" :class="direction === 'horizontal' ? 'flex-row' : 'flex-col'">
    <el-col>
      <el-row class="top-row">
        <div class="person-item">
          <el-avatar :src="avatarDefault" :size="40"></el-avatar>
          <div class="person-text">
            <p class="label">酸洗出口：</p>
            <p class="name">{{ acidPicklingWorker }}</p>
          </div>
        </div>
        <div class="arrow">
          <i class="fa fa-arrow-left" :style="{ fontSize: '1.5rem', color: '#3b82f6' }"></i>
        </div>
        <div class="person-item">
          <el-avatar :size="40" :src="avatarDefault"></el-avatar>
          <div class="person-text">
            <p class="label">顶岗人员：</p>
            <p class="name">{{ reliefWorker }}</p>
          </div>
        </div>
      </el-row>
      <el-row class="bottom-row">
        <div class="status-bar">
          {{ statusText }}
        </div>
      </el-row>
    </el-col>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { ElAvatar } from 'element-plus';

  const props = defineProps({
    direction: {
      type: String,
      default: 'horizontal',
      validator: (val: string) => ['horizontal', 'vertical'].includes(val),
    },
  });

  const acidPicklingWorker = ref('刘洋');
  const reliefWorker = ref('孟德俊');
  const statusText = ref('质检人员全部在岗');
  const avatarDefault = ref('https://cdn.jsdelivr.net/gh/element-plus/element-plus@2.3.9/packages/components/avatar/docs/avatar.png');

  const direction = computed(() => props.direction);
</script>

<style scoped>
  .person-info-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .person-info-container.flex-col {
    flex-direction: column;
  }

  .top-row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
  }

  .person-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* min-width: 180px; */
    justify-content: center;
  }

  .person-text {
    display: flex;
    flex-direction: column;
  }

  .label {
    margin: 0;
    color: #6b7280;
  }

  .name {
    margin: 0;
    font-weight: bold;
  }

  .arrow {
    display: flex;
    align-items: center;
  }

  .bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
  }

  .status-bar {
    background-color: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    text-align: center;
  }
</style>
